<template>
  <div class="ant-col ant-col-24" style="padding:0 30px;">
    <div class="ant-row ant-row-space-between ant-row-middle"
         style="border-bottom: 1px solid rgb(240, 240, 240); height: 60px; padding-bottom: 10px; row-gap: 0px;"
    >
      <div class="ant-col ant-col-18">
        <div class="article-status">
          <div :class="[tabIndex == 0 ? 'is-active' : '']" @click="handleChangeTab(0)">我的文章<span v-if="tabIndex==0 && total>0">({{total}})</span></div>
          <div :class="[tabIndex == 1 ? 'is-active' : '']" @click="handleChangeTab(1)">我的草稿<span v-if="tabIndex==1 && total>0">({{total}})</span></div>
          <div :class="[tabIndex == 3 ? 'is-active' : '']" @click="handleChangeTab(3)">购买文章<span v-if="tabIndex==3 && total>0">({{total}})</span></div>
          <div :class="[tabIndex == 4 ? 'is-active' : '']" @click="handleChangeTab(4)">收藏文章<span v-if="tabIndex==4 && total>0">({{total}})</span></div>
          <div :class="[tabIndex == 5 ? 'is-active' : '']" @click="handleChangeTab(5)">点赞文章<span v-if="tabIndex==5 && total>0">({{total}})</span></div>
          <div :class="[tabIndex == 6 ? 'is-active' : '']" @click="handleChangeTab(6)">文章足迹<span v-if="tabIndex==6 && total>0">({{total}})</span></div>
          <div v-if="tabIndex <= 2"  :class="[tabIndex == 2 ? 'is-active' : '']" @click="handleChangeTab(2)">回收站<span v-if="tabIndex==2 && total>0">({{total}})</span></div>
        </div>
      </div>
      <div class="ant-col ant-col-6" style="text-align:right;">
        <a href="/social/add">
          <n-button style="font-weight: bold">
            <n-icon><add></add></n-icon>
            <span class="px-1">写文章</span>
          </n-button>
        </a>
      </div>
    </div>
    <div class="ant-row" style="row-gap: 0px;" type="flex">
      <div class="ant-col ant-col-24 articles">
        <ksd-bbs-my v-if="tabIndex==0" @success="handleLoadSuccess"></ksd-bbs-my>
        <ksd-bbs-draft v-if="tabIndex==1" @success="handleLoadSuccess"></ksd-bbs-draft>
        <ksd-bbs-buy v-if="tabIndex==3" @success="handleLoadSuccess"></ksd-bbs-buy>
        <ksd-bbs-fav v-if="tabIndex==4" @success="handleLoadSuccess"></ksd-bbs-fav>
        <ksd-bbs-like v-if="tabIndex==5" @success="handleLoadSuccess"></ksd-bbs-like>
        <ksd-bbs-hits v-if="tabIndex==6" @success="handleLoadSuccess"></ksd-bbs-hits>
        <ksd-bbs-recycle v-if="tabIndex==2" @success="handleLoadSuccess"></ksd-bbs-recycle>
      </div>
    </div>
  </div>
</template>
<script setup>
const tabIndex = ref(0)
const total = ref(0)
const userStore = useStore.userState()
const handleGetUserInfo = async ()=>{
  try {
    if(!userStore.isLogin)return;
    const resp = await useLoadUserGetApi()
    userStore.uuid = resp.data.uuid
    userStore.username = resp.data.username
    userStore.nickname = resp.data.nickname
    userStore.avatar = resp.data.avatar
    userStore.role = resp.data.role
    userStore.authorFlag = resp.data.authorFlag
    userStore.teacherFlag = resp.data.teacherFlag
    if( resp.data.role =='normal') {
      if (resp.data.authorFlag == 0) {
        showError({statusCode:404,statusMessage:"你还不是管理员或作者身份，请申请在进行操作!!!"})
      }
    }
  }catch (e) {
    showError({statusCode:404,statusMessage:e.message})
  }
}
const handleChangeTab = (index) => {
  if(tabIndex.value == index) return
  tabIndex.value = index
}

const handleLoadSuccess = (dbTotal)=>{
  total.value = dbTotal
}

onMounted(()=>{
  handleGetUserInfo()
})
</script>
<style scoped>
.options .n-button{margin-left: 10px}
</style>